<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="设备名称：" prop="name">
              <el-input v-model="search.name" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item style="margin-top: -2px">
              <el-button type="primary" @click="searchQuery">查询</el-button>
              <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-alert title="关闭系统、删除设备、修改设备都会使系统停止订阅设备，当设备处于被订阅状态才会同步考勤数据"
              show-icon type="success"
              style="margin-top: 15px"></el-alert>

    <el-alert title="如果启动失败，请检查当前部署项目的系统是windows还是linux，检查配置文件中指定的dll/so的地址是否正确"
              show-icon type="warning"
              style="margin-top: 15px"></el-alert>

    <qm-table
      ref="qmTable"
      menuType="text"
      keyProp="id"
      formRefs="deviceForm"
      :data="query"
      :formOptions="{ labelWidth: '120px' }"
      :showCheckbox="false"
      :showView="false"
      :isCustomForm="true"
      :modalOptions="{ height: 630 }"
      :textMap="{ add: '新建考勤设备' }"
    >
      <qm-table-column field="name">设备名称</qm-table-column>
      <qm-table-column field="status" width="120px" fieldtype="enabledisable">设备订阅状态</qm-table-column>
      <qm-table-column field="autoStart" width="120px" fieldtype="enabledisable">自动订阅</qm-table-column>
      <qm-table-column field="username">用户名</qm-table-column>
      <qm-table-column field="ip">IP地址</qm-table-column>
      <qm-table-column field="port" width="100px">端口</qm-table-column>
      <qm-table-column field="memo">备注</qm-table-column>

      <template v-slot:toolbar>
        <!--        <el-button type="success" icon="el-icon-video-play">查看订阅中的设备</el-button>-->
      </template>

      <template v-slot:moreBtn="{ row }">
        <el-button v-if="!row.status" @click.native="start1(row)" size="mini" type="text">启动</el-button>
        <el-button v-else size="mini" @click.native="stop1(row)" type="text">关闭</el-button>
        <el-dropdown>
          <el-button style="padding-left: 7px;" size="mini" type="text">更多</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="adminPage(row)">打开设备后台管理页面</el-dropdown-item>
            <el-dropdown-item @click.native="showPull(row)">拉取考勤记录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>

      <template v-slot:form="{ model, controlData, models }">
        <el-tabs>
          <el-tab-pane label="考勤设备信息">
            <el-form
              class="qm-table-form"
              ref="deviceForm"
              label-width="120px"
              :model="model"
              :rules="rules.modelRules"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="设备名称：" prop="name">
                    <el-input v-model="models.model.name" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="自动订阅：" prop="autoStart">
                    <el-switch v-model="models.model.autoStart"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户名：" prop="username">
                    <el-input v-model="models.model.username" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="密码：" prop="password">
                    <el-input v-model="models.model.password" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="IP地址：" prop="ip">
                    <el-input v-model="models.model.ip" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="端口：" prop="port">
                    <el-input v-model="models.model.port" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="memo">
                    <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 20}"
                              v-model="models.model.memo"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>
    </qm-table>

    <el-dialog title="拉取考勤记录" :visible.sync="pullVisible" width="600px" center>
      <el-form label-width="80px"
               ref="pullForm"
               :model="pullCondition"
               :rules="rules.pullCondition">
        <el-form-item label="IP地址：">
          <el-input v-model="pullCondition.ip" disabled></el-input>
        </el-form-item>
        <el-form-item label="端口：">
          <el-input v-model="pullCondition.port" disabled></el-input>
        </el-form-item>
        <el-form-item label="日期：" prop="date">
          <el-date-picker
            v-model="pullCondition.date"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="时间：" prop="time">
          <el-time-picker
            is-range
            v-model="pullCondition.time"
            value-format="HH:mm:ss"
            range-separator="→"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="门禁号：">
          <el-input v-model="pullCondition.employeeNo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pullVisible = false">取 消</el-button>
        <el-button type="primary" @click="pullHistory('pullForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import Controller from "@/libs/framework/controller";
  import request from "@/utils/request";

  export default class Instance extends Controller {
    onBeforeInit() {
      this.urls = {
        model: "/eip/hc/getListModel",
        query: "/eip/hc/query",
        save: "/eip/hc/save",
        delete: "/eip/hc/delete",
        entity: "/eip/hc/getEntity",
      }
    }

    mixin() {
      return {
        data() {
          return {
            pullCondition: {},
            pullVisible: false,
            showPassword: 'password',
            rules: {
              modelRules: {
                name: [{required: true, message: "请输入名称", trigger: "blur"}],
                autoStart: [{required: true, message: "请选择", trigger: "blur"}],
                username: [{required: true, message: "请输入用户名", trigger: "blur"}],
                password: [{required: true, message: "请输入密码", trigger: "blur"}],
                ip: [{required: true, message: "请输入IP地址", trigger: "blur"}],
                port: [{required: true, message: "请输入端口", trigger: "blur"}]
              },
              pullCondition: {
                date: [{required: true, message: "请选择日期", trigger: "blur"}],
                time: [{required: true, message: "请选择时间", trigger: "blur"}],
              }
            }
          };
        },
        methods: {
          pullHistory(name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                request({
                  url: "/eip/hc/pullHistory",
                  method: "get",
                  params: {
                    id: this.pullCondition.id,
                    startTime: this.pullCondition.date + " " + this.pullCondition.time[0],
                    endTime: this.pullCondition.date + " " + this.pullCondition.time[1],
                    employeeNo: this.pullCondition.employeeNo,
                  },
                })
                  .then((r) => {
                    if (r && r.success) {
                      this.$message.success("数据已拉取")
                    } else {
                      this.$message.error(r.message || "数据请求失败");
                    }
                  })
                  .catch((e) => {
                    this.$message.error(e);
                  });
                this.pullVisible = false
              } else {
                return false;
              }
            });
          },
          showPull(row) {
            this.pullCondition = row;
            this.pullVisible = true;
          },
          adminPage(row) {
            window.open(`http://${row.ip}`);
          },
          start1(row) {
            request({
              url: "/eip/hc/start/" + row.id,
              method: "get",
            })
              .then((r) => {
                if (r && !r.initMessage) {
                  this.$message({
                    message: "启动成功",
                    type: "success",
                  });
                  this.$refs["qmTable"].refresh();
                } else {
                  reject(r.initMessage || "请求失败");
                }
              })
              .catch((e) => {
                reject(e);
              });
          },
          stop1(row) {
            request({
              url: "/eip/hc/stop/" + row.id,
              method: "get",
            })
              .then((r) => {
                if (r && !r.initMessage) {
                  this.$message({
                    message: "关闭成功",
                    type: "success",
                  });
                  this.$refs["qmTable"].refresh();
                } else {
                  reject(r.initMessage || "请求失败");
                }
              })
              .catch((e) => {
                reject(e);
              });
          }
        },
      };
    }
  }
</script>

<style scoped>

</style>
